<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Title</title>
  <script src="../js/vue-3.2.26.js"></script>
</head>
<body>
<div id="app">
  <!-- 使用拼接太麻烦 -->
  <p>{{firstName+' '+lastName}}</p>
  <p>{{firstName}} {{lastName}}</p>
  <!-- 调用方法需要加() -->
  <p>{{getFullName()}}</p>
  <!-- 使用计算属性不用加() -->
  <p>{{fullName}}</p>
  <p>总价{{totalPrice}}</p>
</div>
</body>
<script>
  const App = {
    data() {
      return {
        firstName: 'Cheng',
        lastName: 'Kai',
        books: [
          {id: 1, name: 'aaa', price: 123.1},
          {id: 2, name: 'bbb', price: 232.6},
          {id: 3, name: 'ccc', price: 423.1},
        ],
      }
    },
    methods: {
      getFullName() {
        return this.firstName + ' ' + this.lastName;
      }
    },
    // 计算属性。有缓存，性能比methods高
    computed: {
      fullName() {
        return this.firstName + ' ' + this.lastName;
      },
      // 计算属性的完整写法，很少这样写
      // fullName: {
      //   // set方法很少使用，不使用就是只读属性
      //   // 如果要使用，要接收一个值
      //   set: function (value) {
      //     // 可以在浏览器控制台输入app.fullName='Cheng Kai'来改变fullName
      //     const names = value.split(' ');
      //     this.firstName = names[0];
      //     this.lastName = names[1];
      //   },
      //   // 只用get方法，就简化成了以上的方法
      //   get: function () {
      //     return this.firstName + ' ' + this.lastName;
      //   }
      // },
      totalPrice() {
        let result = 0;
        // 以下几种计算方式等价
        // for (let i = 0; i < this.books.length; i++) {
        //     result += this.books[i].price;
        // }
        // for (let i in this.books) {
        //     result += this.books[i].price;
        // }
        for (let book of this.books) {
          result += book.price;
        }
        return '￥' + result.toFixed(2);
      }
    },
  }
  const app = Vue.createApp(App).mount("#app");
</script>
</html>
